

//拼接路径要用的
const path = require(`path`)
//引入插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ESLinkPlugin = require(`eslint-webpack-plugin`);
const CopyWebpackPlugin = require("copy-webpack-plugin");


module.exports = {
  //入口文件
  //修改过后以config目录为准 从config出来去入口文件
  entry: path.resolve(__dirname, "../src/index.js"),
  //出口文件
  output: {
    //当前文件夹的新建一个bulid文件夹
    //修改过后以config目录为准 从config出来去出口文件
    path: path.join(__dirname, "../bulid"),
    filename: './js/bundle.js'
  },
  //加载器配置
  module: {
    rules: [
      {
        test: /\.css$/i,
        //为一个数组 从后往前写
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
      {
        test: /\.less$/i,
        use: [
          // compiles Less to CSS
          MiniCssExtractPlugin.loader,
          "css-loader",
          "less-loader",
        ],
      },
      {
        test: /\.(png|jpg|gif|svg|webp)$/,
        //asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。代替之前的url-loader和file-loader
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 30 * 1024, // 小于30kb以下的图片会被打包成base64格式
          },
        },
        generator: {
          filename: 'images/[name][ext]'
        }
      }
    ],
  },
  //插件配置
  plugins: [new MiniCssExtractPlugin({
    //输出独立文件的文件名
    filename: './css/main.css'
  }),
  new HtmlWebpackPlugin({
    //修改过后以config目录为准 从config出来去公共资源的index.html
    filename: "index.html", template: path.resolve(__dirname,"../public/index.html"),
    minify: {
      collapseWhitespace: true,
      keepClosingSlash: true,
      removeComments: true,
      removeRedundantAttributes: true,
      removeScriptTypeAttributes: true,
      removeStyleLinkTypeAttributes: true,
      useShortDoctype: true
    }
  }), new ESLinkPlugin({ fix: true }),
  new CopyWebpackPlugin({
    patterns: [{
      //修改过后以config目录为准 从config出来去webpack目录创建public
      from:path.resolve(__dirname,"../public"),
      to: "public",
      //配置复制时忽略的文件
      globOptions: {
        ignore: ["**/index.html"]
      }
    }],
  }),
  ],
  //优化项目
  optimization: {
    minimizer: [
      // For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line
      // `...`,
      new CssMinimizerPlugin(),
    ],
  },
  //模式
  mode: 'production'
}